<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="./swiper4.5.0/dist/css/swiper.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="./swiper4.5.0/dist/js/swiper.min.js"></script>
</head>
<body>
<div id="topNav" class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide active"><span>推荐</span></div>
    <div class="swiper-slide"><span>热点</span></div>
    <div class="swiper-slide"><span>深圳</span></div>
    <div class="swiper-slide"><span>视频</span></div>
    <div class="swiper-slide"><span>社会</span></div>
    <div class="swiper-slide"><span>娱乐</span></div>
    <div class="swiper-slide"><span>科技</span></div>
    <div class="swiper-slide"><span>问答</span></div>
    <div class="swiper-slide"><span>汽车</span></div>
    <div class="swiper-slide"><span>财经</span></div>
    <div class="swiper-slide"><span>军事</span></div>
    <div class="swiper-slide"><span>体育</span></div>
    <div class="swiper-slide"><span>段子</span></div>
    <div class="swiper-slide"><span>美女</span></div>
    <div class="swiper-slide"><span>国际</span></div>
    <div class="swiper-slide"><span>趣图</span></div>
    <div class="swiper-slide"><span>健康</span></div>
    <div class="swiper-slide"><span>特产</span></div>
    <div class="swiper-slide"><span>房产</span></div>
  </div>
</div>
  <script>
 var pageSwiper = new Swiper('.swiper-container2', {
        paginationClickable: true,
        uniqueNavElements :false,
        onSlideChangeStart: function(swiper){
//            console.log(swiper.activeIndex)
//            mySwiper.slideTo(swiper.activeIndex, 1000, false);
            $("#topNav  .active").removeClass('active')
            $("#topNav .swiper-slide").eq(swiper.activeIndex).addClass('active')
            slide = mySwiper.slides[swiper.activeIndex];//获取当前的slide节点
            slideLeft = slide.offsetLeft
            slideWidth = slide.clientWidth
            slideCenter = slideLeft + slideWidth / 2
            // 被点击slide的中心点
            console.log("============")
            console.log("slideLeft:"+slideLeft)
            console.log("maxWidth:"+maxWidth)
            console.log("slideCenter:"+slideCenter)
            console.log("swiperWidth / 2:"+swiperWidth / 2)
            mySwiper.setWrapperTransition(300)
            if (slideCenter < swiperWidth / 2) {
                mySwiper.setWrapperTranslate(0)
            } else if (slideCenter >maxWidth) {
                mySwiper.setWrapperTranslate(maxTranslate)
                console.log("maxTranslate:"+maxTranslate)
            } else {
                nowTlanslate = slideCenter - swiperWidth / 2
                console.log(nowTlanslate)
                mySwiper.setWrapperTranslate(-nowTlanslate)
            }
        }
    });
</script>


<!--<img src="images/img02.png">-->
<script type="text/javascript">
var mySwiper = new Swiper('#topNav', {
    freeMode: true,
    freeModeMomentumRatio: 0.5,
    slidesPerView: 'auto',
});
swiperWidth = mySwiper.container[0].clientWidth
maxTranslate = mySwiper.maxTranslate();
maxWidth = -maxTranslate + swiperWidth / 2
$(".swiper-container").on('touchstart', function(e) {
    e.preventDefault()
})
mySwiper.on('tap', function(swiper, e) {
//    console.log(swiper.clickedIndex)
    pageSwiper.slideTo(swiper.clickedIndex, 1000, false);//跳转
//  e.preventDefault()
    slide = swiper.slides[swiper.clickedIndex]
    slideLeft = slide.offsetLeft
    slideWidth = slide.clientWidth
    slideCenter = slideLeft + slideWidth / 2
    console.log("slideLeft:"+slideLeft)
    console.log("maxWidth:"+maxWidth)
    console.log("slideCenter:"+slideCenter)
    // 被点击slide的中心点
    mySwiper.setWrapperTransition(300)
    if (slideCenter < swiperWidth / 2) {
        mySwiper.setWrapperTranslate(0)
    } else if (slideCenter > maxWidth) {
        mySwiper.setWrapperTranslate(maxTranslate)
    } else {
        nowTlanslate = slideCenter - swiperWidth / 2
        mySwiper.setWrapperTranslate(-nowTlanslate)
    }
    $("#topNav  .active").removeClass('active')
    $("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')
})
  </script>

</body>
</html>